<!-- 
  Vuex
    是什么: 一款Vue官方提供的状态管理器,用于处理项目中需要全局共享的数据.

    版本问题:
      目前最新的是 Vuex 4.x 版本,该版本用于 Vue3
      - Vue2 Vuex 3.x
      - Vue3 Vuex 4.x

    一个核心五个配置四个辅助函数:
      一个核心:   仓库 store
      五个配置:
          1. state
              存放数据的,类似于组件中的 data 概念
              是可以修改的.
          2. getters
              存放一个一个的 getter 的.
              基于 state 数据,或其他 getter 数据,通过计算得到的一份新数据.类似于组件中的 computed 概念
              是只读的.不可以修改的
          3. mutations
              存放一个一个的 mutation(突变) 的
              它的作用是用于修改 state 的.
              Vuex中修改 state 数据的唯一方式,就是 提交(commit)突变(mutation). (其实有很多方式来修改state.但官方推荐的方式是提交突变)
              只能有同步代码,不能有异步代码.
          4. actions
              存放一个一个的 action(动作) 的
              它的作用是用于增强 mutation 的. action 中可以有异步代码.
              action 中不能直接修改 state .但可以通过提交突变来间接的修改 state 数据.
              派发(dispatch)动作(action)
          5. modules
              将仓库已模块的方式来拆分的配置项.
      四个辅助函数:
          1. mapState
          2. mapGetters
          3. mapMutations
          4. mapActions

  基本使用步骤:
    1. 安装
      npm install vuex@3
    2. 创建仓库
    3. 注册仓库
    4. 组件中使用仓库数据
    5. 组件中修改仓库数据

  
  组件中使用仓库数据
    1. 直接通过 $store.state.xxx 在模板中使用
      <p>{{ $store.state.count }}</p>
    2. 通过 computed 计算属性来映射 仓库中的 state 数据到组件上
      computed: {
        count() {
          return this.$store.state.count;
        },
      },
    3. 通过 mapState 辅助函数来映射 仓库中的 state 数据到组件上, 要结合computed使用的
      语法:
        const result对象 = mapState(可选的一个模块命名, 数组或对象)

        mapState(['count', 'msg'])
        ==>
        {
          count() {
            return this.$store.state.count
          },
          msg() {
            return this.$store.state.msg
          }
        }

 -->

<template>
  <div>
    <h1>App</h1>
    <p>{{ $store.state.count }}</p>
    <p>count: {{ count }}</p>
    <p>msg: {{ msg }}</p>

    <p>doubleCount: {{ $store.getters.doubleCount }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <p>countPlus: {{ countPlus }}</p>
    <hr />
    <Hello />
  </div>
</template>

<script>
// 从 vuex 中导出辅助函数
import { mapState, mapGetters } from "vuex";
import Hello from "./components/Hello.vue";
export default {
  components: {
    Hello,
  },
  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   doubleCount() {
  //     return this.$store.getters.doubleCount;
  //   }
  // },

  // computed: mapState(["count", "msg"]),
  //   上面一行代码写法没问题,但是会让当前组件无法编写属于自己的计算属性,于是可以改写成下面的样子
  computed: {
    ...mapState(["count", "msg"]),
    ...mapGetters(["doubleCount", "countPlus"]),
    selfHello() {
      return "ssss";
    },
  },
  created() {
    // store实例对象上有两个属性和两个方法
    //  - state         仓库中的state数据
    //  - getters       仓库中的getters数据
    //  - commit()      提交突变的一个函数
    //  - dispatch()    派发动作的一个函数
    console.log(this.$store);
  },
};
</script>
